import React, {useEffect, useState} from 'react';
import {Button, Card, Form, Input, message} from "antd";

const FormItem = Form.Item

function Operator(props) {
    const [form] = Form.useForm();
    const [info,setInfo] = useState({}),
        [loading,setLoading] = useState(false);
    useEffect(()=>{
        setLoading(true)
        ax.get("/api/getBroadcastInfo").then(res=>{
            setInfo(res.data)
            form.setFieldsValue(res.data);
        }).finally(()=>{
            setLoading(false)
        })
    },[])
    function onFinish(values){
        setLoading(true);
        ax.post("/api/setBroadcastInfo",{
            ID:info.ID,
            ...values,
        }).then(res=>{
            message.success("设置成功");
        }).finally(()=>{
            setLoading(false)
        })
    }
    return (
        <Card
            title={"语音播报设置"}
            hoverable={true}
            style={{
                width: "50%",
                minWidth: 500,
                background: "#fefefe",
                margin: "0 auto",

            }}
        >
            <Form
                form={form}
                labelCol={{
                    span:6
                }}
                wrapperCol={{
                    span:18
                }}
                onFinish={onFinish}
            >
                <FormItem
                    label={"欢迎语"}
                    name={"welcomeText"}
                    tooltip="如：欢迎光临偶遇京城24小时无人自助共享茶空间，祝您使用愉快"
                >
                    <Input placeholder={"请输入欢迎语，顾客到店后播报"} maxLength={30} allowClear/>
                </FormItem>
                <FormItem
                    label={"续费提醒"}
                    name={"renewalText"}
                    tooltip="如："
                >
                    <Input placeholder={"请输入续费提醒语，距离订单结束15分钟播报"} maxLength={30} allowClear/>
                </FormItem>
                <FormItem
                    label={"续费成功语"}
                    name={"renewalSuccessText"}
                    tooltip="如："
                >
                    <Input placeholder={"请输入续费成功后的播报内容"} maxLength={30} allowClear/>
                </FormItem>
                <FormItem
                    label={"结束语"}
                    name={"endText"}
                    tooltip="如："
                >
                    <Input placeholder={"请输入结束语"} maxLength={30} allowClear/>
                </FormItem>
                <div className={"flex center"}>
                    <Button type={"primary"} htmlType={"submit"} loading={loading} style={{width: 200}}>保存</Button>
                </div>
            </Form>
        </Card>
    );
}

export default Operator;